<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .choiceBox{
        width: 100px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        background: #a1a1a1;
        font-size: 14px;
        color: #fff;
        float: left;
    }
    .selectBox{
        width: 60px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        background: #fff;
        font-size: 14px;
        border: 1px solid #afafaf;
        float: left;
    }
    .determineBox{
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
        background: #0b7ac0;
        border:none ;
        margin-left: 20px;
    }
    .determineBox:hover{
        background: #0a6fae;
    }
</style>
<body>
<select class="selectBox" style="margin-right: 30px" id="select">
    <option value="按日">按日</option>
    <option value="按月">按月</option>
    <option value="按年">按年</option>
</select>
<div id="year">
    <select name="sel1" id="sel1" class="selectBox">
        <option value="year">年</option>
    </select>
    <div class="choiceBox" style="width: 30px;">年</div>
</div>
<div id="month">
    <select name="sel2" id="sel2" class="selectBox" style="width: 45px;">
        <option value="month">月</option>
    </select>
    <div class="choiceBox" style="width: 30px;">月</div>
</div>
<div id="day">
    <select name="sel3" id="sel3" class="selectBox" style="width: 45px;">
        <option value="day">日</option>
    </select>
    <div class="choiceBox" style="width: 30px;">日</div>
</div>
<button class="determineBox">确定</button>
<script src="/static/js/jquery.min.js"></script>
<script>
    // 选择方式判断
    $("#select").change(function(){
        if($('#select').val()=='按年'){
            $('#month').css('display','none');
            $('#day').css('display','none')
        }else if($('#select').val()=='按月'){
            $('#month').css('display','block');
            $('#day').css('display','none')
        }else if($('#select').val()=='按日'){
            $('#month').css('display','block');
            $('#day').css('display','block')
        }
    });
    //生成日期
    $(function () {
        function creatDate(){
            //生成1900年-2100年
            for(var i = 2017; i<=2100;i++){
                var option = document.createElement('option');
                option.setAttribute('value',i);
                option.innerHTML = i;
                sel1.appendChild(option);
            }
            //生成1月-12月
            for(var i = 1; i <=12; i++){
                var option = document.createElement('option');
                option.setAttribute('value',i);
                option.innerHTML = i;
                sel2.appendChild(option);
            }
            //生成1日—31日
            for(var i = 1; i <=31; i++){
                var option = document.createElement('option');
                option.setAttribute('value',i);
                option.innerHTML = i;
                sel3.appendChild(option);
            }
        }
        creatDate();
        //保存某年某月的天数
        var days;
        //年份点击
        sel1.onclick = function(){
            //月份显示默认值
            sel2.options[0].selected = true;
            //天数显示默认值
            sel3.options[0].selected = true;
        }
        //月份点击
        sel2.onclick = function(){
            //天数显示默认值
            sel3.options[0].selected = true;
            //计算天数的显示范围
            //如果是2月
            if(sel2.value == 2){
                //如果是闰年
                if((sel1.value % 4 === 0 && sel1.value % 100 !== 0)  || sel1.value % 400 === 0){
                    days = 29;
                    //如果是平年
                }else{
                    days = 28;
                }
                //如果是第4、6、9、11月
            }else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){
                days = 30;
            }else{
                days = 31;
            }
            //增加或删除天数
            //如果是28天，则删除29、30、31天(即使他们不存在也不报错)
            if(days == 28){
                sel3.remove(31);
                sel3.remove(30);
                sel3.remove(29);
            }
            //如果是29天
            if(days == 29){
                sel3.remove(31);
                sel3.remove(30);
                //如果第29天不存在，则添加第29天
                if(!sel3.options[29]){
                    sel3.add(new Option('29','29'),undefined)
                }
            }
            //如果是30天
            if(days == 30){
                sel3.remove(31);
                //如果第29天不存在，则添加第29天
                if(!sel3.options[29]){
                    sel3.add(new Option('29','29'),undefined)
                }
                //如果第30天不存在，则添加第30天
                if(!sel3.options[30]){
                    sel3.add(new Option('30','30'),undefined)
                }
            }
            //如果是31天
            if(days == 31){
                //如果第29天不存在，则添加第29天
                if(!sel3.options[29]){
                    sel3.add(new Option('29','29'),undefined)
                }
                //如果第30天不存在，则添加第30天
                if(!sel3.options[30]){
                    sel3.add(new Option('30','30'),undefined)
                }
                //如果第31天不存在，则添加第31天
                if(!sel3.options[31]){
                    sel3.add(new Option('31','31'),undefined)
                }
            }
        }
    })

    $('.determineBox').click(function () {
        var year = $('#sel1').val();
        var month = $('#sel2').val();
        var day = $('#sel3').val();
        alert(year+'-'+month+'-'+day)
    });
</script>
</body>
</html>